<template>
	<view>
		<view class="top">
			
			<view class="flex justify-between mid align-center margin-top-xl">
				<view class="money">
					<view class="">现有收益</view>
					<view class="text-xxl text-bold margin-top-xs">{{pro.current}}</view>
				</view>
				<view class="btn flex justify-center align-center" @click="into">
					转入钱包
				</view>
			</view>
			
			<view class="padding wrap">
				<view class="item">
					<view class="text-sm">智营收益</view>
					<view class="text-lg margin-top-xs">{{pro.direct_upgrade}}</view>
				</view>
				<view class="line"></view>
				<view class="item">
					<view class="text-sm">云募收益</view>
					<view class="text-lg margin-top-xs">{{pro.team_upgrade}}</view>
				</view>
				<view class="line"></view>
				<view class="item">
					<view class="text-sm">经营分润</view>
					<view class="text-lg margin-top-xs">{{pro.manager_recharge}}</view>
				</view>
				<view class="line"></view>
				<view class="item">
					<view class="text-sm">累计收益</view>
					<view class="text-lg margin-top-xs">{{pro.total_gain}}</view>
				</view>
			</view>
		</view>
		
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
		  <view class="cu-item" :class="k==TabCur?'active cur':''" v-for="(i,k) in tabs" :key="k" @tap="tabSelect" :data-id="k">
		    {{i.text}}
		  </view>
		</scroll-view>
		<view class="padding-bottom-sm"></view>
		
		<view class="tab-list bg-white" v-show="TabCur==0">
			<my-tab-item
				v-for="i in list0"
				:key="i.id"
				img="../../static/images/w4.png" :title="i.reason" info="" :date="i.created_at" :change="i.amount"></my-tab-item>
		</view>
		
		<view class="tab-list bg-white" v-show="TabCur==1">
			<my-tab-item
				v-for="i in list1"
				:key="i.id"
				img="../../static/images/w4.png" :title="i.reason" info="" :date="i.created_at" :change="i.amount"></my-tab-item>
		</view>
		
		<view class="tab-list bg-white" v-show="TabCur==2">
			<my-tab-item
				v-for="i in list2"
				:key="i.id"
				img="../../static/images/w4.png" :title="i.reason" info="" :date="i.created_at" :change="i.amount"></my-tab-item>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
		  return {
		    TabCur: 0,
		    scrollLeft: 0,
		    tabs: [
					{
						text: '智营'
					},
					{
						text: '云募'
					},
					{
						text: '分润'
					}
				],
				list0: [],
				list1: [],
				list2: [],
				pro: {}
		  }
		},
		onLoad() {
			this.getData();
		},
		methods: {
		  tabSelect(e) {
		    this.TabCur = e.currentTarget.dataset.id;
		    this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
		  },
			getData() {
				this.$u.get('/finance/gain').then(res => {
					let data = res.data.result
					this.pro = data
					this.list0 = data.gain.direct_upgrade
					this.list1 = data.gain.manager_recharge
					this.list2 = data.gain.team_upgrade
 				})
			},
			into() {
				this.$u.get('/finance/gain/wallet').then(res => {
					this.getData();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #EFEFEF;
	}
	.top {
		height:400rpx;
		background:#1F1F1F;
		color: #E4CB9B;
		display: flex;
		flex-flow: column;
		justify-content: flex-end;
		.mid {
			padding: 0 70rpx;
		}
		.wrap {
			margin: 30rpx auto;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.item {
				text-align: center;
				width: 170rpx;
			}
			.line {
				width: 1px;
				height: 50rpx;
				background-color: #FBC4AA;
			}
		}
		.money {
			display: flex;
			flex-flow: column;
		}
		.btn {
			width:232rpx;
			height:64rpx;
			border:2rpx solid #E4CB9B;
			border-radius:32rpx;
		}
	}
	.nav {
		position: sticky;
		background-color: #fff;
		top: 0;
		z-index: 99;
		.active {
			font-weight: bold;
			color: #1F1F1F;
		}
	}
</style>
